<template>
  <div class="home_page">
    <banner ref="banner"/>

    <div class="menu">
      <router-link tag="dl" to="/masters">
        <dt>
          <img src="@/assets/index/icon-boss@2x.png">
        </dt>
        <dd>
          <h2 class="f32">找大师</h2>
          <p class="f24">一对一私密咨询</p>
        </dd>
      </router-link>
      <router-link tag="dl" to="/interact/asked">
        <dt>
          <img src="@/assets/index/icon-tell@2x.png">
        </dt>
        <dd>
          <h2 class="f32">专属问答</h2>
          <p class="f24">一事一测•轻松解决</p>
        </dd>
      </router-link>
    </div>

    <swiper class="cate-data" :options="catesOptions">
      <swiper-slide v-for="(v, i) in cates" :key="'cate' + i">
        <router-link
          class="cate-item"
          tag="div"
          :to="{path: '/masters', query: {serviceId: v.serviceId}}"
        >
          <figure>
            <img :src="v.icon | hasdomain">
          </figure>
          <p class="f24">{{v.serviceName}}</p>
        </router-link>
      </swiper-slide>
    </swiper>

    <tidings/>

    <stars title="推荐大师" more="true"/>

    <div class="classes" v-if="false">
      <dl class="flex1 color1">
        <dd class="f26">术语小课堂</dd>
        <dd class="f18">塔罗只能预测三个月之前的事件，而占 星属于命理类，可以分析命主的...</dd>
        <dt>
          <img src="@/assets/test/flex1.png">
        </dt>
      </dl>
      <div class="flex2">
        <dl class="flex1 color2">
          <dd class="f26">术语小课堂</dd>
          <dd class="f18">塔罗和占星的区别在哪？</dd>
          <dt>
            <img src="@/assets/test/flex2.png">
          </dt>
        </dl>
        <dl class="flex1 color3">
          <dd class="f26">术语小课堂</dd>
          <dd class="f18">塔罗和占星的区别在哪？</dd>
          <dt>
            <img src="@/assets/test/flex2.png">
          </dt>
        </dl>
      </div>
    </div>

    <div class="adlist3">
      <div
        class="flex1"
        v-if="adlists[0]"
        :style="{backgroundImage: 'url('+ hasdomain(adlists[0].adFile) +')'}"
        @click="addLink(adlists[0].adURL)"
      ></div>
      <div class="flex1 flex2">
        <div
          class="flex1"
          v-if="adlists[1]"
          :style="{backgroundImage: 'url('+ hasdomain(adlists[1].adFile) +')'}"
          @click="addLink(adlists[1].adURL)"
        ></div>
        <div
          class="flex1"
          v-if="adlists[2]"
          :style="{backgroundImage: 'url('+ hasdomain(adlists[2].adFile) +')'}"
          @click="addLink(adlists[2].adURL)"
        ></div>
      </div>
    </div>

    <div class="classroom">
      <h3 class="title f26">
        <span>术数小课堂</span>
        <figure @click="getArticle">
          <img src="@/assets/index/refresh@2x.png">
        </figure>
      </h3>
      <div class="qa">
        <p class="qa-q f24">{{article.articleTitle}}</p>
        <p class="qa-a f22">{{article.articleContent}}</p>
        <div class="qa-b f22">
          <router-link tag="p" :to="{path: '/masters', query: {tags: article.tag}}">查看相关大师</router-link>
          <figure class="like" @click="makeFav(article.articleId)">
            <img :src="require('@/assets/index/'+ article.flower +'@2x.png')">
            <span>{{article.favoriteCount}}</span>
          </figure>
          <figure class="dislike" @click="getArticle">
            <img src="@/assets/index/egg@2x.png">
          </figure>
        </div>
      </div>
    </div>

    <div class="column-box topic">
      <h3 class="column-bar">
        <p class="title">测算专题</p>
        <router-link tag="span" to="/topics" class="more">更多专题</router-link>
      </h3>
      <swiper :options="topicOptions">
        <swiper-slide
          v-for="(v, i) in topics"
          :key="i"
          @click.native="$router.push({name: 'tdetail', params: {id: v.articleId}})"
        >
          <figure>
            <img :src="v.articleImg | hasdomain">
          </figure>
        </swiper-slide>
      </swiper>
    </div>
    <bask-single></bask-single>
    <m-footer/>
  </div>
</template>

<script>
import mSearch from "@/components/search";
import mFooter from "@/components/footer";
import banner from "@/components/banner";
import tidings from "@/components/tidings";
import stars from "@/components/stars";
import baskSingle from '@/components/baskSingle'

export default {
  components: {
    mSearch,
    mFooter,
    banner,
    tidings,
    stars,
    baskSingle
  },
  data() {
    return {
      opacity: 0,
      catesOptions: {
        slidesPerView: 4.5
      },
      cates: [],
      adlists: [],
      article: {
        flower: "flower"
      },
      topicOptions: {
        slidesPerView: 1.5
      },
      topics: [],
      isMark: false
    };
  },
  computed: {
    uid() {
      return this.$store.state.userId;
    }
  },
  methods: {
    addLink(url) {
      this.$router.push({
        path: url
      });
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var searchHeight = this.$refs.search.$el.offsetHeight;
      var bannerHeight = this.$refs.banner.$el.offsetHeight;
      this.opacity = scrollTop / (bannerHeight - searchHeight);
    },
    getServices() {
      this.$http
        .fetchGet("getServiceListSimple", {
          limit: 9
        })
        .then(({ data = [] }) => {
          console.log("服务列表", data);
          this.cates = data;
        });
    },
    getAdlist() {
      this.$http
        .fetchGet("adlist", {
          adpositionId: 14,
          positionType: 1
        })
        .then(({ data = [] }) => {
          console.log("3个广告", data);
          this.adlists = data;
        });
    },
    getArticle() {
      this.$http
        .fetchGet("getShushuArticle", {
          catId: 9,
          offset: 0,
          limit: 1
        })
        .then(({ data = [] }) => {
          console.log("术语小课堂", data);
          data[0].flower = "flower";
          this.$set(this, "article", data[0]);
          this.isFav(data[0].articleId);
        });
    },
    makeFav() {
      if (this.article.flower == "flowered")
        return this.$vux.toast.text("鲜花已送！");
      this.$http
        .fetchGet("makefavorite", {
          favoriteType: 5,
          id: this.article.articleId,
          userId: this.uid
        })
        .then(({ data }) => {
          console.log("鲜花加一", data);
          if (data && data.join() == "ok") {
            this.$vux.toast.text("鲜花送上！");
            this.article.flower = "flowered";
            this.article.favoriteCount++;
          }
        });
    },
    isFav(aid) {
      this.$http
        .fetchGet("isFavorited", {
          favoriteType: 5,
          id: aid,
          userId: this.uid
        })
        .then(({ data = {} }) => {
          console.log("是否鲜花", data);
          this.article.flower = data.isFavorited ? "flowered" : "flower";
        });
    },
    getTopics() {
      this.$http
        .fetchGet("getShushuArticle", {
          catId: 1,
          offset: 0,
          limit: 3
        })
        .then(({ data = [] }) => {
          console.log("测算专题", data);
          this.topics = data;
        });
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var searchHeight = this.$refs.search.$el.offsetHeight;
      var bannerHeight = this.$refs.banner.$el.offsetHeight;
      this.opacity = scrollTop / (bannerHeight - searchHeight);
    }
  },
  created() {
    this.getServices();
    this.getAdlist();
    this.getArticle();
    this.getTopics();
  },
  mounted() {
    // window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    // window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<style scoped lang="less">
.index {
  .pb(@fheight);
}
.menu {
  .h(178);
  display: flex;
  border-bottom: 1px solid #ededed;
  dl {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../assets/index/icon-fanhui@2x.png);
    background-repeat: no-repeat;
    background-position: right 22/75 * 1rem center;
    .px2rem(background-size, 12);
    &:first-child {
      border-right: 1px solid #ededed;
    }
    dt {
      .w(46);
      .pr(20);
      img {
        display: block;
        width: 100%;
      }
    }
    dd {
      h2 {
        .mb(10);
      }
      p {
        color: #999999;
      }
    }
  }
}
.cate-data {
  .cate-item {
    .pt(30);
    .pb(30);
    &:active {
      background-color: @bgColor;
    }
    figure img {
      display: block;
      margin: 0 auto;
      width: 50%;
    }
    p {
      .pt(30);
      text-align: center;
    }
  }
}
.classes {
  .bb20();
  .h(340);
  overflow: hidden;
  display: flex;
  .flex1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ededed;
    .pl(16);
    .pr(16);
    dd.f26 {
      .mt(10);
      .lh(50);
    }
    dd.f18 {
      color: #666666;
      line-height: 2;
    }
    dt {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        height: 90%;
      }
    }
    &.color1 {
      dd.f26 {
        color: #bebdfd;
      }
    }
    &.color2 {
      dd.f26 {
        color: #4ca9cb;
      }
    }
    &.color3 {
      dd.f26 {
        color: #f8b345;
      }
    }
  }
  .flex2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ededed;
  }
}
.adlist3 {
  .bb20();
  .h(350);
  display: flex;
  .flex1 {
    flex: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .flex2 {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ededed;
    .flex1:nth-child(1) {
      border-bottom: 1px solid #ededed;
    }
  }
}
.classroom {
  .bb20();
  .title {
    .pt(30);
    .pb(30);
    text-align: center;
    position: relative;
    figure {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      .w(32);
      .p(20);
      img {
        display: block;
        width: 100%;
      }
    }
  }
  .qa {
    .pl(20);
    .pr(20);
    .lh(36);
    word-break: break-all;
    .qa-a {
      .mt(20);
      color: #666666;
    }
    .qa-b {
      color: #666666;
      display: flex;
      align-items: center;
      p {
        flex: 1;
        .pt(40);
        .pb(40);
        font-weight: bold;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 6.5em;
          top: 50%;
          transform: translateY(-50%);
          .w(8);
          height: 50%;
          background: url("../assets/index/icon-fanhui@2x.png") no-repeat right
            center;
          .px2rem(background-size, 8);
        }
      }
      figure {
        .w(100);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          .h(30);
          .m(10);
        }
        span {
          flex: 1;
        }
      }
    }
  }
}
.topic {
  border-bottom-color: transparent;
  .bb20();
  .swiper-container {
    .pl(10);
    .pr(10);
    figure {
      .pl(10);
      .pr(10);
      .pb(10);
      img {
        display: block;
        width: 100%;
      }
    }
  }
}
</style>